<script setup lang="ts">
	import { reactive, ref, watch } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	// import manualEntry from './manualEntry.vue'

	let haveDevice = ref(false)
	
	let manualEntryInfo = reactive({
		showStatus: false,
		deviceData : reactive({
			temperature : 23,
			humidity : 34,
			phValue : 200
		})
	})
	const deviceInfo = reactive({
		deviceName: 'XX温湿度传感器',
		deviceNO: 'NO:34232335235',
		icon: '/static/images/icon/bluetooth1.svg',
		status:'未链接',
		deviceData : reactive({
			temperature : null,
			humidity : null,
			phValue : null
		})
		
	})
	const deviceContent =reactive({
		temperature : '温度：' + (deviceInfo.deviceData.temperature === null ? "" : deviceInfo.deviceData.temperature),
		humidity : "湿度：" + (deviceInfo.deviceData.humidity === null ? '' : deviceInfo.deviceData.humidity),
		phValue : "酸碱度：" + (deviceInfo.deviceData.phValue === null ? '' : deviceInfo.deviceData.phValue)
	})
	onLoad(() => {
		const val = true// uni.getStorageSync('deviceInfo')
		
		if(val){
			haveDevice.value = true
			console.log('onload --- deviceInfo: ' + true)
		}else{
			haveDevice.value = false
			console.log('onload --- deviceInfo: ' + false)
		}
	})
	
	const setStorage = () =>{
		uni.setStorageSync('deviceInfo', 'true')
		console.log('setStorage---sucess')
	}
	const getStorage = () =>{
		const value = uni.getStorageSync('launchFlagv1.0')
		console.log('getgetgetgetgetgetgetStorage---sucess')
		console.log('------Value------', value)
	}
	const onRemoveDevice = () =>{
		uni.removeStorageSync('deviceInfo')
		haveDevice.value = false
		console.log('removeremoveStorage---sucess')
	}
	const onFindDevice = () => {
		uni.redirectTo({
			url:'/pages/detection/deviceList/deviceList'
		})
	}
	const removeGuide = () =>{
		uni.removeStorageSync('launchFlagv1.0')
		// haveDevice.value = false
		console.log('RemoveGuideStorage---sucess')
	}
	const getDeviceData =()=>{
		deviceInfo.deviceData.temperature = Math.floor(Math.random() * 20)
		deviceInfo.deviceData.humidity = Math.floor(Math.random() * 20)
		deviceInfo.deviceData.phValue = Math.floor(Math.random() * 20)
	
		deviceContent.temperature = '温度：' + (deviceInfo.deviceData.temperature === null ? "" : deviceInfo.deviceData.temperature),
		deviceContent.humidity = "湿度：" + (deviceInfo.deviceData.humidity === null ? '' : deviceInfo.deviceData.humidity),
		deviceContent.phValue = "酸碱度：" + (deviceInfo.deviceData.phValue === null ? '' : deviceInfo.deviceData.phValue)
	}

	const linkDevice =()=>{
		
		if(deviceInfo.status === '未链接'){
			console.log('linkDevice：' + deviceInfo.status)
			deviceInfo.status = '链接中'
			console.log('linkDevice：' + deviceInfo.status)
			setTimeout(() => {
				deviceInfo.status = '已链接'
				setTimeout(() => {
					getDeviceData()
				}, 1000)
			}, 1000)
		}else if(deviceInfo.status === '已链接'){
			deviceInfo.status = '设备异常'
			deviceInfo.deviceData.temperature = ''
			deviceInfo.deviceData.humidity = ''
			deviceInfo.deviceData.phValue = ''
			
			deviceContent.temperature = '温度：'
			deviceContent.humidity = "湿度："
			deviceContent.phValue = "酸碱度："
			uni.showToast({
				icon:'error',
				title:'设备状态异常'
			})
			
		}else if(deviceInfo.status === '链接中'){
			uni.showToast({
				icon:'none',
				title:'正在链接，请耐心等待'
			})
		}else{
			uni.showToast({
				icon:'exception',
				title:'设备状态异常'
			})
		}
	}
	const showManualEntry = () => {
		console.log('manualEntry')
		// manualEntryInfo.showStatus = true
		console.log(manualEntryInfo.deviceData.temperature, manualEntryInfo.deviceData.humidity, manualEntryInfo.deviceData.phValue);
		//传递参数给manualEntry：方式一
		// uni.redirectTo({
		// 	url:'/pages/index/manualEntry?temperature=' + manualEntryInfo.deviceData.temperature +'&humidity=' + manualEntryInfo.deviceData.humidity + '&phValue=' +  manualEntryInfo.deviceData.phValue
		// })
		
		// uni.redirectTo({
		// 	url:'/pages/index/manualEntry',
		// 	success(res){
		// 		res.eventChannel.emit('manualEntryInfo', {
		// 			data: 'asdas'
		// 		})
		// 		console.log(res, 'success');
		// 	},fail(res){
		// 		console.log(res, 'fail');
		// 	}
		// })
		
		//接收manualEntry回传的参数 方式一
		uni.redirectTo({
			url:'/pages/detection/manualEntry/manualEntry',
			acceptDataFormDetail(value) {
			    console.log('接收到detail传递给home的数据', value);
			}
		})
	}

	// const getManualEntryData =(e : any) =>{
		
	// 	// console.log(manualEntryInfo.deviceData.temperature);
	// 	console.log('getManualEntryData' + e.target);
		
	// 	// manualEntryInfo.deviceData.temperature = ''
	// 	// manualEntryInfo.deviceData.humidity = ''
	// 	// manualEntryInfo.deviceData.phValue = 
	// 	// console.log(manualEntryInfo.deviceData.phValue);
	// 	manualEntryInfo.showStatus = false
	// }
	// const emit = defineEmits(['get-ManualEntryData'])
	const confirmData =()=>{
		console.log('温度：' + manualEntryInfo.deviceData.temperature)
		// console.log('温度：' + manualEntryInfo.deviceData.temperature + '；\n湿度：' + console.log(manualEntryInfo.deviceData.humidity) + '；\n酸碱度：' + console.log(manualEntryInfo.deviceData.phValue));
		// emit('get-ManualEntryData', manualEntryInfo)
		manualEntryInfo.showStatus = false
	}
	const selectPlant = () => {
		uni.redirectTo({
			url:"/pages/detection/plantList/plantList"
		})
	}
</script>

<template>
	<view class="content">
		<view v-if="haveDevice">
			<view class="">
			</view>
			<up-card :title="deviceInfo.deviceName" :sub-title="deviceInfo.deviceNO" :thumb="deviceInfo.icon">
				<template #body>
					<view slot="body">
						<view style="display: flex; justify-content:space-between;">
							<view class="link" style="">
								<span>设备状态：</span> 
								<up-text v-if="deviceInfo.status === '未链接'" type="warning" :text="deviceInfo.status" @click="linkDevice"></up-text>
								<up-text v-else-if="deviceInfo.status === '链接中'" type="primary" :text="deviceInfo.status" @click="linkDevice"></up-text>
								<up-text v-else-if="deviceInfo.status === '已链接'" type="success" :text="deviceInfo.status" @click="linkDevice"></up-text>
								<view v-else style="display: flex;">
									<up-text  type="error" text="设备异常" @click="linkDevice"></up-text>
									<up-button style="width: 100rpx; margin-left: 20rpx;" size="small" type="primary" :plain="true" :hairline="true" text="人工录入" @click="showManualEntry"></up-button>
								</view>
							</view>
							<uni-icons type="close" size="30" @click="onRemoveDevice"></uni-icons>
						</view>
						<up-line></up-line>
						<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
							<view class="body">
								<view class="body-item">
									<up-text type="success" :text="deviceContent.temperature"></up-text>
								</view>
							</view>
						</view>
						<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
							<view class="body">
								<view class="body-item">
									<up-text type="warning" :text="deviceContent.humidity"></up-text>
								</view>
							</view>
						</view>
						<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
							<view class="body">
								<view class="body-item">
									<up-text type="primary" :text="deviceContent.phValue"></up-text>
								</view>
							</view>
						</view>
					</view>
				</template>
				<template #foot>
					<view>
						<up-icon name="chat-fill" size="34" color="" label="30评论"></up-icon>
					</view>
				</template>
			</up-card>

			<up-modal :show="manualEntryInfo.showStatus"  title="数据采集" showCancelButton @cancel="manualEntryInfo.showStatus = false;" @confirm="confirmData">
				<view style="width: 80%;">
					<up-input placeholder="请输入温度" border="bottom" :modelValue="manualEntryInfo.deviceData.temperature" clearable></up-input>
					<up-input placeholder="请输入湿度" border="bottom" :modelValue="manualEntryInfo.deviceData.humidity" clearable></up-input>
					<up-input placeholder="请输入酸碱度" border="bottom" :modelValue="manualEntryInfo.deviceData.phValue" clearable></up-input>
				</view>
			</up-modal>
			<!-- <manualEntry :show="manualEntryInfo.showStatus" :manualEntryInfo="manualEntryInfo"></manualEntry> -->
		</view>

		<view v-else class="empty">
			<up-image src="/pages/img/empty.png"></up-image>
			<up-button style="margin-top: 20rpx;" type="primary" :plain="true" :hairline="true" size="" text="发现设备" @click="onFindDevice"></up-button>
		</view>
		
		<up-button type="primary" :plain="true" :hairline="true" text="下次进入启动引导页" @click="removeGuide"></up-button>
		<up-button type="primary" :plain="true" :hairline="true" text="选择绿植" @click="selectPlant"></up-button>
	</view>
	
	
</template>

<style lang="scss">
	 // @get-ManualEntryData="getManualEntryData"
	@font-face {
		font-family: CustomFont;
		src: url('./iconfont.ttf');
	}
	.content {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transform: translateZ(1);

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		background-color : rgb(245, 245, 245)
	}

	.empty {
		border: 1px red solid;
/* 		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx; */
		margin-left: auto;
		margin-right: auto;
		/* margin-bottom: 50rpx; */
	}
	.link{
		display: flex; align-items: center;
	}
	
	.body{
		margin-top: 15rpx;
		border-radius: 5rpx;
	}
	.body-item {
		// border: 1rpx red solid;
		height: 100rpx;
		width:  600rpx;
		display: flex;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}
	.delete{
		width: 45rpx;
		height: 45rpx;
		margin-right: 5rpx;
	}
	.u-card-wrap { 
			// background-color: $up-bg-color;
		padding: 1px;
	}
</style>
